


$(function () {

$( ".dest" ).sortable({items: ".attribute_element", cancel: ".attribute_element .fixedObj"});
    $(".dest" ).disableSelection();
	
	
	
	$('body').on('click','input',function( event ) {
 
  $(this).focus();
});

$('body').on('click','.hide',function( event ) {
 
  $(this).parent().parent().parent().attr('style','display:none;');
  
  $('.overlay').attr('style','display:none;');
});


/*
	$('body').on('click','.required',function( event ) {
 
	var dialog=$(this).closest('.box').find('.requiredWhen:first');
 
  if($(this).is(':checked')){
  
  modalPanel($(dialog).parent());
  
  $('.overlay').attr('style','display:block;');
  
  $(dialog).attr('style','display:block;');
  
  }else{
  
 // $(dialog).find('.modal').remove();
  
  }
});


$('body').on('click','.readonly',function( event ) {
 
	var dialog=$(this).closest('.box').find('.readonlyWhen:first');
 
  if($(this).is(':checked')){
  
  modalPanel($(dialog).parent());
  
  $('.overlay').attr('style','display:block;');
  
  $(dialog).attr('style','display:block;');
  
  }else{
  
 // $(dialog).find('.modal').remove();
  
  }
});
	
*/
	
	
	$('body').on('click','.remove',function(){

$(this).parent().parent().remove();
});

$('body').on('click','.addDropDown',function(){

$(this).parent().append('<div><input type="text" class="dropDownElementList"/><span class="div remove">&nbsp;&nbsp;X&nbsp;&nbsp;</span></div>');
});


$('body').on('click','.addCondition',function(){

$(this).closest('.modal').find('.scroller').append(addCondition($(this).closest('.box')));
});





    $('.attribute,.attrChild,.child2').draggable({
        revert: true
    });
    $('.dest').droppable({
        accept: '.attribute',
        drop: function (event, ui) {
            $newElt = $('<div class="attribute_element box sort"><div><div  class="fixedObj" style="width:97%;"><input type="text" class="attributeDesc" placeholder="Enter attribute description" class="cancel"/></div><span class="remove">&nbsp;X</span></div></div>');
            $newElt.appendTo(this);
            $newElt.droppable({
                accept: '.attrChild',
                drop: function (event, ui) {
				
	
	$(".attribute_element" ).sortable({items: ".sort", cancel: "div .fixedObj"});

    $(".attribute_element .cancel" ).disableSelection();
	
	
				
				if($(ui.draggable).hasClass('dropDown')){
				
                    $newtSubElt = $('<div class="dropDownElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Dropdown" class="aspectDesc desc"/><span class="addElement addDropDown">Add Element</span></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    $newtSubElt.droppable({
                        accept: '.child2',
                        drop: function (event, ui) {
                            $('<div class="child2 box"></div>').appendTo(this);
                        }
                    });
                } else if($(ui.draggable).hasClass('checkBox')){
				
                    $newtSubElt = $('<div class="checkBoxElement box sort aspectItem"><span class="remove">&nbsp;X</span><div class="chkBox"><input type="checkbox" disabled="disabled"/><input  class="desc" type="text"  class="desc" placeholder="Enter description for Checkbox"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('label')){
				
                    $newtSubElt = $('<div class="labelElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text class="desc"  placeholder="Enter Label"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('numeric')){
				
                    $newtSubElt = $('<div class="numericElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Numeric Input Field"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('decimal')){
				
                    $newtSubElt = $('<div class="decimalElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Decimal Input Field"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('alphaNum')){
				
                    $newtSubElt = $('<div class="alphaNumElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Alpha-Numeric Input Field"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('char')){
				
                    $newtSubElt = $('<div class="charElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc aspectDesc" placeholder="Enter description for Character Input Field"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span><div class="dialogForm requiredWhen" title="Required When"  style="display:none;"></div><div class="dialogForm readOnlyWhen" title="Readonly When"  style="display:none;"></div></div>');
                    $newtSubElt.appendTo(this);
					
                    
                } else if($(ui.draggable).hasClass('bool')){
				
                    $newtSubElt = $('<div class="boolElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc aspectDesc"  placeholder="Enter description for Boolean Input Field"/></div><span class="tag"><p><input  class="required" type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                }
				
				modalPanel(this);
				
				}
            });
        }
    });
    
    
});